import {quillEditor} from 'vue-quill-editor'
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline'],
    ['blockquote', 'code-block'],
    [{'header': 1}, {'header': 2}],
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'indent': '-1'}, {'indent': '+1'}],
    [{'size': ['small', false, 'large', 'huge']}],
    [{'color': []}, {'background': []}],
    [{'font': []}],
    ['image'],
];
export default {
    components: {
        quillEditor
    },
    data() {
        return {
            // 富文本编辑器配置
            header: {token: sessionStorage.token},              //有的图片服务器要求请求头需要有token之类的参数，写在这里
            editorOption: {
                placeholder: '',
                theme: 'snow',                                  //样式
                modules: {
                    toolbar: {
                        container: toolbarOptions,              //工具栏
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                    document.querySelector('.avatar-uploader input').click()
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            },
            goods_id: 0,
            ruleForm: {
                title: '',
                postData: {},
                sn: '',
                sort: '',
                band: [],
                close: [],
                radio: "2",      //有无肩带
                is_handle: "2",  //有无把手
                deposit: '',     //押金
                width_max: '',       //最大宽度,
                height: '',      //高度
                straps: '',      //肩带
                widthMin: '',    //最小宽度
                thick: '',       //厚度
                handle: '',      //把手
                appearance: [],  //外形分类
                color: [],       //颜色分类
                purpose: [],     //用途分类
                level: [],       //品级分类
            },
            rules: {
                title: [
                    {required: true, message: '请输入商品名称', trigger: 'blur'},
                ],
                sn: [
                    {required: true, message: '请输入商品ID', trigger: 'blur'},
                ],
                band: [
                    {required: true, message: '请选择商品品牌', trigger: 'blur'},
                ],
                close: [
                    {required: true, message: '请选择商品闭合方式', trigger: 'blur'},
                ],
                appearance: [
                    {required: true, message: '请选择外形分类', trigger: 'blur'},
                ],
                color: [
                    {required: true, message: '请选择颜色分类', trigger: 'blur'},
                ],
                purpose: [
                    {required: true, message: '请选择用途分类', trigger: 'blur'},
                ],
                level: [
                    {required: true, message: '请选择品级分类', trigger: 'blur'},
                ],
                deposit: [
                    {required: true, message: '请输入商品押金', trigger: 'blur'},
                ],
            },
            allBrand: [],            //品牌列表
            ch_name: "",             //中文名称
            short_name: '',          //品牌简称
            country: '',             //品牌所属国家

            closeList: [],           //闭合方式列表
            appearanceList: [],      //外形分类
            colorList: [],           //颜色列表
            purposeList: [],         //用途分类
            levelList: [],           //级别分类
            straps: '',              //肩带

            hardWareOut: "2",        //外部五金
            OilEdgeOut: "2",
            LineWalkingOut: "2",
            surfaceOut: "2",
            otherOut: "2",

            hardWareWith: "2",       //内部五金
            OilEdgeWith: "2",
            LineWalkingWith: "2",
            surfaceWith: "2",
            otherWith: "2",

            dialogVisible: false,    //添加短购方案弹窗
            tableData: [],           //短购方案
            day: '',                 //短购天数
            total_price: '',               //总价
            day_average: '',         //日均价
            class_table_index: '',

            content: "",             //富文本内容
            goods_remarks: '',       //商品备注
            imgList: [],			 //商品图片列表
            hardWareOutImgList: [],          //外部五金五篇列表(本地上传列表)
            OilEdgeOutImgList: [],			 //外部油边列表(本地上传列表)
            LineWalkingOutImgList: [],	     //外部走线图片列表(本地上传列表)
            surfaceOutImgList: [],			 //外部表面图片列表(本地上传列表)
            otherOutImgList: [],			 //外部其他图片列表(本地上传列表)
            hardWareWithImgList: [],		 //内部五金图片列表(本地上传列表)
            OilEdgeWithImgList: [],			 //内部油边图片列表(本地上传列表)
            LineWalkingWithImgList: [],		 //内部走线图片列表(本地上传列表)
            surfaceWithImgList: [],			 //内部表面图片列表(本地上传列表)
            otherWithImgList: [],			 //内部其他图片列表(本地上传列表)

            postData: {},			 //七牛云postData
            descImageUrl: '',		 //图片
            desc_img: false,		 //是否展示删除
            domain: '',				 //图片域名

            goods_picture: [],            //商品图片(发送服务器)
            hardWareOutList: [],         //外部五金五篇列表(发送服务器)
            OilEdgeOutList: [],			 //外部油边列表(发送服务器)
            LineWalkingOutList: [],	     //外部走线图片列表(发送服务器)
            surfaceOutList: [],			 //外部表面图片列表(发送服务器)
            otherOutList: [],			 //外部其他图片列表(发送服务器)
            hardWareWithList: [],		 //内部五金图片列表(发送服务器)
            OilEdgeWithList: [],		 //内部油边图片列表(发送服务器)
            LineWalkingWithList: [],	 //内部走线图片列表(发送服务器)
            surfaceWithList: [],		 //内部表面图片列表(发送服务器)
            otherWithList: [],			 //内部其他图片列表(发送服务器)
        }
    },

    //进入页面加载
    mounted: function () {
        var that = this;
        //在缓存中获取值
        that.user_name = sessionStorage.getItem("user_name");
        that.user_id = sessionStorage.getItem("user_id");
        that.token = sessionStorage.getItem("access-token");
        if ((!that.token) || (!that.user_id) || (!that.user_name)) {
            that.$router.push('/login');
        }
        //加载轮播详情
        if (that.$route.query.goods_id) {
            that.goods_id = that.$route.query.goods_id;
            that.detail();
        }
        

        that.getQiNiuToken();       //获取七牛云token
        that.getBrandList();        // 获取品牌列表
        that.getCloseList();        //闭合方式列表
        that.getAppearanceList();   //外形分类列表
        that.getColorList();        //颜色分类列表
        that.getPurposeList();      //用途分类列表
        that.getLevelList();        //品级分类列表
        window.addEventListener('scroll', this.handleScroll)
    },

    //方法
    methods: {
        handleScroll () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            console.log(scrollTop)
        },
        //请求api
        submitForm(formName) {
            var that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (that.goods_id === 0) {
                        that.addGoods();
                    } else {
                        that.editCitySwiper();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        //获取七牛云token
        getQiNiuToken: function () {
            var that = this;
            //请求登陆接口
            that.$http.post(that.adminApi.api_url + "/api/Qiniu/getToken", {
                token: that.token,
            }, {
                emulateJSON: true
            }).then(
                function (res) {
                    // 处理成功的结果
                    that.postData = {
                        token: res.body.upToken,
                    }
                    that.domain = res.body.domain;
                },
                function () {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },

        /**
         * 选中品牌带出剩余项
         */
        changeBand: function () {
            let that = this;
            //请求登陆接口
            that.$http.post(that.adminApi.api_url + "/api/combrand/show_edit", {
                token: that.token,
                id: that.ruleForm.band
            }, {
                emulateJSON: true
            }).then(
                function (res) {
                    // 处理成功的结果
                    that.ch_name = res.body.name;
                    that.short_name = res.body.for_short;
                    that.country = res.body.country;
                },
                function () {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },

        /**
         *上传商品图片
         */
        descPictureCardPreview(file) {//预览
            this.descImageUrl = file.url;
            this.desc_img = true;
        },
        descRemove(file, fileList) { //删除
            var that = this;
            that.imgList = fileList;
        },
        descError(res) { //显示错误
            console.log(res)
        },
        descAvatarSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid: file['raw']['uid']
            };
            that.imgList.push(imageUrl);
        },
        //文件超出个数限制时的钩子
        descExceed(files, fileList) {
            this.$message.error('最多上传十张图片');
        },

        /**
         * 外部五金图片
         */
        hardWareOutRemove(file, fileList) { //删除
            var that = this;
            that.hardWareOutImgList = fileList;
        },
        hardWareOutAvatarSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid: file['raw']['uid']
            };
            that.hardWareOutImgList.push(imageUrl);
        },

        /**
         * 外部油边图片
         */
        OilEdgeOutRemove(file, fileList) { //删除
            var that = this;
            that.OilEdgeOutImgList = fileList;
        },
        OilEdgeOutSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid: file['raw']['uid']
            };
            that.OilEdgeOutImgList.push(imageUrl);
        },

        /**
         * 外部走线图片
         */
        LineWalkingOutRemove(file, fileList) { //删除
            var that = this;
            that.LineWalkingOutImgList = fileList;
        },
        LineWalkingOutSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid: file['raw']['uid']
            };
            that.LineWalkingOutImgList.push(imageUrl);
        },

        /**
         * 外部表面图片
         */
        surfaceOutRemove(file, fileList) { //删除
            var that = this;
            that.surfaceOutImgList = fileList;
        },
        surfaceOutSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid: file['raw']['uid']
            };
            that.surfaceOutImgList.push(imageUrl);
        },

        /**
         * 外部其他图片
         */
        otherOutRemove(file, fileList) { //删除
            var that = this;
            that.otherOutImgList = fileList;
        },
        otherOutSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid: file['raw']['uid']
            };
            that.otherOutImgList.push(imageUrl);
        },

        /**
         * 内部五金图片
         */
        hardWareWithRemove(file, fileList) { //删除
            var that = this;
            that.hardWareWithImgList = fileList;
        },
        hardWareWithSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid: file['raw']['uid']
            };
            that.hardWareWithImgList.push(imageUrl);
        },

        /**
         * 内部油边图片
         */
        OilEdgeWithRemove(file, fileList) { //删除
            var that = this;
            that.OilEdgeWithImgList = fileList;
        },
        OilEdgeWithSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid: file['raw']['uid']
            };
            that.OilEdgeWithImgList.push(imageUrl);
        },

        /**
         * 内部走线图片
         */
        LineWalkingWithRemove(file, fileList) { //删除
            var that = this;
            that.LineWalkingWithImgList = fileList;
        },
        LineWalkingWithSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid: file['raw']['uid']
            };
            that.LineWalkingWithImgList.push(imageUrl);
        },

        /**
         * 内部表面图片
         */
        surfaceWithRemove(file, fileList) { //删除
            var that = this;
            that.surfaceWithImgList = fileList;
        },
        surfaceWithSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid: file['raw']['uid']
            };
            that.surfaceWithImgList.push(imageUrl);
        },

        /**
         * 内部其他图片
         */
        otherWithRemove(file, fileList) { //删除
            var that = this;
            that.otherWithImgList = fileList;
        },
        otherWithSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid: file['raw']['uid']
            };
            that.otherWithImgList.push(imageUrl);
        },

        /**
         *富文本信息
         */
        onEditorReady(editor) {

        },
        //编辑时动态获取
        onEditorChange({editor, html, text}) {
            var that = this;
            that.ruleForm.desc = html;
        },
        PictureCardPreview(file) {
            console.log(file);
        },
        //上传成功
        AvatarSuccess(res, file) { //上传成功后在图片框显示图片
            let that = this;
            // 获得文件上传后的URL地址
            let url = that.domain + res.key;
            if (url != null && url.length > 0) { // 将文件上传后的URL地址插入到编辑器文本中
                let value = url;
                // 获取光标位置对象，里面有两个属性，一个是index 还有 一个length，这里要用range.index，即当前光标之前的内容长度，然后再利用 insertEmbed(length, 'image', imageUrl)，插入图片即可。
                let length = that.$refs.myQuillEditor.quill.getSelection().index;
                that.addRange = that.$refs.myQuillEditor.quill.getSelection();
                value = value.indexOf('http') !== -1 ? value : 'http:' + value;
                that.$refs.myQuillEditor.quill.insertEmbed(that.addRange !== null ? that.addRange.index : 0, 'image', value, Quill.sources.USER) // 调用编辑器的 insertEmbed 方法，插入URL
                // 调整光标到最后
                that.$refs.myQuillEditor.quill.setSelection(length + 1);
            } else {
                that.$message.error(`${that.uploadType}插入失败`)
            }
            that.$refs['upload'].clearFiles()    // 插入成功后清除input的内容
        },


        /**
         * 值改变时计算日均价
         */
        changeTotal: function () {
            let that = this;
            let day_average = that.total_price / that.day;
            that.day_average = day_average.toFixed(2);
        },

        /**
         * 关闭规格弹窗
         */
        close_table: function () {
            var that = this;
            that.dialogVisible = false;
            that.class_table_index = '';
            that.day = '';
            that.total_price = '';
            that.day_average = '';
        },

        /**
         * 添加规格
         */
        confirm() {
            var that = this;
            that.dialogVisible = false;
            if (that.class_table_index === '') {
                that.tableData.push({
                    id:0,
                    day: that.day,
                    total_price: that.total_price,
                    day_average: that.day_average,
                });
            } else {
                that.tableData[that.class_table_index].day = that.day;
                that.tableData[that.class_table_index].total_price = that.total_price;
                that.tableData[that.class_table_index].day_average = that.day_average;
            }

            that.class_table_index = '';
            that.day = '';
            that.total_price = '';
            that.day_average = '';
        },

        /**
         * 修改规格
         */
        editVisible: function (indx) {
            var that = this;
            console.log(indx);
            that.class_table_index = indx;
            that.dialogVisible = true;
            that.day = that.tableData[indx].day;
            that.total_price = that.tableData[indx].total_price;
            that.day_average = that.tableData[indx].day_average;
        },

        /**
         * 移除短租方案
         */
        deleteRow(index, rows) {
            let that = this;
            if((that.tableData[index].id) || (that.tableData[index].id === 0)){
                //请求邀请者列表
                that.$http.post(that.adminApi.api_url + "/api/operate/remove_rent",{
                    token: that.token,
                    shortrent_id:that.tableData[index].id
                }, {
                    emulateJSON: true
                }).then(
                    function (res) {
                        rows.splice(index, 1);
                    },
                    function () {
                        // 处理失败的结果
                        that.$message({
                            type: 'error',
                            message: `操作提示: ${ '处理异常' }`
                        });
                    });
            }else{
                rows.splice(index, 1);
            }
        },

        /**
         * 添加商品
         * @returns {boolean}
         */
        addGoods: function () {
            var that = this;

            if (that.tableData.length === 0) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '请至少添加一个短购方案' }`
                });
                return false;
            }

            if (that.imgList.length === 0) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张商品图片' }`
                });
                return false;
            }

            if ((that.hardWareOutImgList.length === 0) && (that.hardWareOut === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张外部五金图片' }`
                });
                return false;
            }

            if ((that.OilEdgeOutImgList.length === 0) && (that.OilEdgeOut === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张外部油边图片' }`
                });
                return false;
            }
            if ((that.LineWalkingOutImgList.length === 0) && (that.LineWalkingOut === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张外部走线图片' }`
                });
                return false;
            }
            if ((that.surfaceOutImgList.length === 0) && (that.surfaceOut === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张外部表面图片' }`
                });
                return false;
            }


            if ((that.otherOutImgList.length === 0) && (that.otherOut === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张外部其他图片' }`
                });
                return false;
            }
            if ((that.hardWareWithImgList.length === 0) && (that.hardWareWith === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张内部五金图片' }`
                });
                return false;
            }
            if ((that.OilEdgeWithImgList.length === 0) && (that.OilEdgeWith === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张内部油边图片' }`
                });
                return false;
            }
            if ((that.LineWalkingWithImgList.length === 0) && (that.LineWalkingWith === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张内部走线图片' }`
                });
                return false;
            }

            if ((that.surfaceWithImgList.length === 0) && (that.surfaceWith === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张内部表面图片' }`
                });
                return false;
            }
            if ((that.otherWithImgList.length === 0) && (that.otherWith === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张内部表面图片' }`
                });
                return false;
            }

            //请求的数据
            var formData = {};
            formData.token = that.token;
            formData.title = that.ruleForm.title;
            formData.sn = that.ruleForm.sn;
            formData.sort = that.ruleForm.sort;
            formData.brand_id = that.ruleForm.band;
            formData.closed_mode_id = that.ruleForm.close;
            formData.max_width = that.ruleForm.width_max;
            formData.min_width = that.ruleForm.widthMin;
            formData.height = that.ruleForm.height;
            formData.is_aiguillette = that.ruleForm.radio;
            formData.aiguillette_height = that.ruleForm.straps;
            formData.thickness = that.ruleForm.thick;
            formData.is_handlebar = that.ruleForm.is_handle;
            formData.handlebar_height = that.ruleForm.handle;
            formData.color_id = that.ruleForm.color;
            formData.grade_id = that.ruleForm.level;
            formData.shape_id = that.ruleForm.appearance;
            formData.scene_id = that.ruleForm.purpose;

            formData.is_external_hardware = that.hardWareOut;
            formData.is_external_oil_edge = that.OilEdgeOut;
            formData.is_external_line = that.LineWalkingOut;
            formData.is_external_surface = that.surfaceOut;
            formData.is_external_other = that.otherOut;
            formData.is_inside_hardware = that.hardWareWith;
            formData.is_inside_oil_edge = that.OilEdgeWith;
            formData.is_inside_line = that.LineWalkingWith;
            formData.is_inside_surface = that.surfaceWith;
            formData.is_inside_other = that.otherWith;

            formData.purchase = that.tableData;
            formData.deposit = that.ruleForm.deposit;
            formData.content = that.content;
            formData.describe = that.goods_remarks;

            if (that.imgList) {
                for (var i in that.imgList) {
                    that.goods_picture.push(that.imgList[i].url)
                }
            }

            //外部五项
            if (that.hardWareOutImgList) {
                for (var i in that.hardWareOutImgList) {
                    that.hardWareOutList.push(that.hardWareOutImgList[i].url)
                }
            }
            if (that.OilEdgeOutImgList) {
                for (var i in that.OilEdgeOutImgList) {
                    that.OilEdgeOutList.push(that.OilEdgeOutImgList[i].url)
                }
            }
            if (that.LineWalkingOutImgList) {
                for (var i in that.LineWalkingOutImgList) {
                    that.LineWalkingOutList.push(that.LineWalkingOutImgList[i].url)
                }
            }
            if (that.surfaceOutImgList) {
                for (var i in that.surfaceOutImgList) {
                    that.surfaceOutList.push(that.surfaceOutImgList[i].url)
                }
            }
            if (that.otherOutImgList) {
                for (var i in that.otherOutImgList) {
                    that.otherOutList.push(that.otherOutImgList[i].url)
                }
            }

            //内部五项
            if (that.hardWareWithImgList) {
                for (var i in that.hardWareWithImgList) {
                    that.hardWareWithList.push(that.hardWareWithImgList[i].url)
                }
            }
            if (that.OilEdgeWithImgList) {
                for (var i in that.OilEdgeWithImgList) {
                    that.OilEdgeWithList.push(that.OilEdgeWithImgList[i].url)
                }
            }
            if (that.LineWalkingWithImgList) {
                for (var i in that.LineWalkingWithImgList) {
                    that.LineWalkingWithList.push(that.LineWalkingWithImgList[i].url)
                }
            }
            if (that.surfaceWithImgList) {
                for (var i in that.surfaceWithImgList) {
                    that.surfaceWithList.push(that.surfaceWithImgList[i].url)
                }
            }
            if (that.otherWithImgList) {
                for (var i in that.otherWithImgList) {
                    that.otherWithList.push(that.otherWithImgList[i].url)
                }
            }

            //商品图
            formData.goods_picture = that.goods_picture;

            //外部五项
            if (that.hardWareOut === '1') {
                formData.hardware_picture = that.hardWareOutList;
            }
            if (that.OilEdgeOut === '1') {
                formData.edge_picture = that.OilEdgeOutList;
            }
            if (that.LineWalkingOut === '1') {
                formData.line_picture = that.LineWalkingOutList;
            }
            if (that.surfaceOut === '1') {
                formData.surface_picture = that.surfaceOutList;
            }
            if (that.otherOut === '1') {
                formData.other_picture = that.otherOutList;
            }

            //内部五项
            if (that.hardWareWith === '1') {
                formData.inside_h_picture = that.hardWareWithList;
            }
            if (that.OilEdgeWith === '1') {
                formData.inside_e_picture = that.OilEdgeWithList;
            }
            if (that.LineWalkingWith === '1') {
                formData.inside_l_picture = that.LineWalkingWithList;
            }
            if (that.surfaceWith === '1') {
                formData.inside_s_picture = that.surfaceWithList;
            }
            if (that.otherWith === '1') {
                formData.inside_o_picture = that.otherWithList;
            }

            //请求列表
            that.$http.post(that.adminApi.api_url + "/api/operate/add", formData, {
                emulateJSON: true
            }).then(
                function (res) {
                    // 处理成功的结果
                    that.$message({
                        type: 'success',
                        message: `操作提示: ${ '添加成功' }`
                    });
                    that.$router.push({
                        path: '/commodity/goods',
                        // query: {city_id: that.city_id, type: that.type, store_id: that.store_id}
                    });
                },
                function () {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },

        /**
         * 商品详情
         */
        detail: function () {
            var that = this;
            //请求的数据
            var formData = {};
            formData.token = that.token;
            formData.goods_id = that.goods_id;

            //请求邀请者列表
            that.$http.post(that.adminApi.api_url + "/api/operate/show_edit", formData, {
                emulateJSON: true
            }).then(
                function (res) {
                    that.ruleForm.title = res.body.title;
                    that.ruleForm.sn = res.body.sn;
                    that.ruleForm.sort = res.body.sort;
                    that.ruleForm.band = res.body.brand_id;
                    that.ch_name = res.body.brand_info.name;       //品牌中文
                    that.short_name = res.body.brand_info.for_short;    //品牌简称
                    that.country = res.body.brand_info.country;       //所属国家

                    that.ruleForm.close = res.body.closed_mode_id;
                    that.ruleForm.width_max = res.body.max_width;
                    that.ruleForm.height = res.body.height;
                    that.ruleForm.radio = res.body.is_aiguillette.toString(); //是否有肩带
                    that.ruleForm.straps = res.body.aiguillette_height;
                    that.ruleForm.widthMin = res.body.min_width;
                    that.ruleForm.thick = res.body.thickness;
                    that.ruleForm.is_handle = res.body.is_handlebar.toString();
                    that.ruleForm.handle = res.body.handlebar_height;

                    that.ruleForm.appearance = res.body.shape_list; //外形分类
                    that.ruleForm.color = res.body.color_id;
                    that.ruleForm.purpose = res.body.scene_list;   //用途分类
                    that.ruleForm.level = res.body.grade_id;

                    //当前使用状态
                    that.hardWareOut = res.body.is_external_hardware.toString();
                    that.OilEdgeOut = res.body.is_external_oil_edge.toString();
                    that.LineWalkingOut = res.body.is_external_line.toString();
                    that.surfaceOut = res.body.is_external_surface.toString();
                    that.otherOut = res.body.is_external_other.toString();
                    that.hardWareWith = res.body.is_inside_hardware.toString();
                    that.OilEdgeWith = res.body.is_inside_oil_edge.toString();
                    that.LineWalkingWith = res.body.is_inside_line.toString();
                    that.surfaceWith = res.body.is_inside_surface.toString();
                    that.otherWith = res.body.is_inside_other.toString();

                    //图片信息
                    if(res.body.goods_picture.length >0) {
                        for (var i in res.body.goods_picture) {
                            that.imgList.push({
                                url: res.body.goods_picture[i].file,
                                picture: res.body.goods_picture[i].file
                            });
                        }
                    }

                    //外部五项
                    if (res.body.is_external_hardware === 1) {
                        if(res.body.hardware_picture.length >0) {
                            for (var i in res.body.hardware_picture) {
                                that.hardWareOutImgList.push({
                                    url: res.body.hardware_picture[i].file,
                                    picture: res.body.hardware_picture[i].file
                                });
                            }
                        }
                    }

                    if (res.body.is_external_oil_edge === 1) {
                        if(res.body.edge_picture.length >0) {
                            for (var i in res.body.edge_picture) {
                                that.OilEdgeOutImgList.push({
                                    url: res.body.edge_picture[i].file,
                                    picture: res.body.edge_picture[i].file
                                });
                            }
                        }
                    }

                    if (res.body.is_external_line === 1) {
                        if(res.body.line_picture.length >0) {
                            for (var i in res.body.line_picture) {
                                that.LineWalkingOutImgList.push({
                                    url: res.body.line_picture[i].file,
                                    picture: res.body.line_picture[i].file
                                });
                            }
                        }
                    }

                    if (res.body.is_external_surface === 1) {
                        if(res.body.surface_picture.length >0) {
                            for (var i in res.body.surface_picture) {
                                that.surfaceOutImgList.push({
                                    url: res.body.surface_picture[i].file,
                                    picture: res.body.surface_picture[i].file
                                });
                            }
                        }
                    }

                    if (res.body.is_external_other === 1) {
                        if(res.body.other_picture.length >0) {
                            for (var i in res.body.other_picture) {
                                that.otherOutImgList.push({
                                    url: res.body.other_picture[i].file,
                                    picture: res.body.other_picture[i].file
                                });
                            }
                        }
                    }

                    //内部五项
                    if (res.body.is_inside_hardware === 1) {
                        if(res.body.inside_h_picture.length >0) {
                            for (var i in res.body.inside_h_picture) {
                                that.hardWareWithImgList.push({
                                    url: res.body.inside_h_picture[i].file,
                                    picture: res.body.inside_h_picture[i].file
                                });
                            }
                        }
                    }
                    if (res.body.is_inside_oil_edge === 1) {
                        if(res.body.inside_e_picture.length >0) {
                            for (var i in res.body.inside_e_picture) {
                                that.OilEdgeWithImgList.push({
                                    url: res.body.inside_e_picture[i].file,
                                    picture: res.body.inside_e_picture[i].file
                                });
                            }
                        }
                    }

                    if (res.body.is_inside_line === 1) {
                        if(res.body.inside_l_picture.length >0) {
                            for (var i in res.body.inside_l_picture) {
                                that.LineWalkingWithImgList.push({
                                    url: res.body.inside_l_picture[i].file,
                                    picture: res.body.inside_l_picture[i].file
                                });
                            }
                        }
                    }

                    if (res.body.is_inside_surface === 1) {
                        if(res.body.inside_s_picture.length >0) {
                            for (var i in res.body.inside_s_picture) {
                                that.surfaceWithImgList.push({
                                    url: res.body.inside_s_picture[i].file,
                                    picture: res.body.inside_s_picture[i].file
                                });
                            }
                        }
                    }
                    if (res.body.is_inside_other === 1) {
                        if(res.body.inside_o_picture.length >0) {
                            for (var i in res.body.inside_o_picture) {
                                that.otherWithImgList.push({
                                    url: res.body.inside_o_picture[i].file,
                                    picture: res.body.inside_o_picture[i].file
                                });
                            }
                        }
                    }
                    that.ruleForm.deposit = res.body.deposit;

                    //短购方案
                    if(res.body.purchase.length >0) {
                        for (var i in res.body.purchase) {
                            that.tableData.push({
                                id:res.body.purchase[i].id,
                                day: res.body.purchase[i].day,
                                total_price: res.body.purchase[i].total_price,
                                day_average: ((res.body.purchase[i].total_price) / (res.body.purchase[i].day)).toFixed(2),
                            })
                        }
                    }

                    that.content = res.body.content;
                    that.goods_remarks = res.body.describe;
                    setTimeout(function () {
                        subpage.scrollIntoView();
                    },100);
                },
                function () {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },

        /**
         * 修改商品
         * @returns {boolean}
         */
        editCitySwiper: function () {
            var that = this;
            if (that.tableData.length === 0) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '请至少添加一个短购方案' }`
                });
                return false;
            }

            if (that.imgList.length === 0) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张商品图片' }`
                });
                return false;
            }

            if ((that.hardWareOutImgList.length === 0) && (that.hardWareOut === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张外部五金图片' }`
                });
                return false;
            }

            if ((that.OilEdgeOutImgList.length === 0) && (that.OilEdgeOut === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张外部油边图片' }`
                });
                return false;
            }
            if ((that.LineWalkingOutImgList.length === 0) && (that.LineWalkingOut === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张外部走线图片' }`
                });
                return false;
            }
            if ((that.surfaceOutImgList.length === 0) && (that.surfaceOut === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张外部表面图片' }`
                });
                return false;
            }


            if ((that.otherOutImgList.length === 0) && (that.otherOut === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张外部其他图片' }`
                });
                return false;
            }
            if ((that.hardWareWithImgList.length === 0) && (that.hardWareWith === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张内部五金图片' }`
                });
                return false;
            }
            if ((that.OilEdgeWithImgList.length === 0) && (that.OilEdgeWith === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张内部油边图片' }`
                });
                return false;
            }
            if ((that.LineWalkingWithImgList.length === 0) && (that.LineWalkingWith === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张内部走线图片' }`
                });
                return false;
            }

            if ((that.surfaceWithImgList.length === 0) && (that.surfaceWith === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张内部表面图片' }`
                });
                return false;
            }
            if ((that.otherWithImgList.length === 0) && (that.otherWith === '1')) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张内部表面图片' }`
                });
                return false;
            }

            //请求的数据
            var formData = {};
            formData.token = that.token;
            formData.id = that.goods_id;
            formData.title = that.ruleForm.title;
            formData.sn = that.ruleForm.sn;
            formData.sort = that.ruleForm.sort;
            formData.brand_id = that.ruleForm.band;
            formData.closed_mode_id = that.ruleForm.close;
            formData.max_width = that.ruleForm.width_max;
            formData.min_width = that.ruleForm.widthMin;
            formData.height = that.ruleForm.height;
            formData.is_aiguillette = that.ruleForm.radio;
            formData.aiguillette_height = that.ruleForm.straps;
            formData.thickness = that.ruleForm.thick;
            formData.is_handlebar = that.ruleForm.is_handle;
            formData.handlebar_height = that.ruleForm.handle;
            formData.color_id = that.ruleForm.color;
            formData.grade_id = that.ruleForm.level;
            formData.shape_id = that.ruleForm.appearance;
            formData.scene_id = that.ruleForm.purpose;

            formData.is_external_hardware = that.hardWareOut;
            formData.is_external_oil_edge = that.OilEdgeOut;
            formData.is_external_line = that.LineWalkingOut;
            formData.is_external_surface = that.surfaceOut;
            formData.is_external_other = that.otherOut;
            formData.is_inside_hardware = that.hardWareWith;
            formData.is_inside_oil_edge = that.OilEdgeWith;
            formData.is_inside_line = that.LineWalkingWith;
            formData.is_inside_surface = that.surfaceWith;
            formData.is_inside_other = that.otherWith;

            formData.purchase = that.tableData;
            formData.deposit = that.ruleForm.deposit;
            formData.content = that.content;
            formData.describe = that.goods_remarks;

            if (that.imgList) {
                for (var i in that.imgList) {
                    that.goods_picture.push(that.imgList[i].url)
                }
            }

            //外部五项
            if (that.hardWareOutImgList) {
                for (var i in that.hardWareOutImgList) {
                    that.hardWareOutList.push(that.hardWareOutImgList[i].url)
                }
            }
            if (that.OilEdgeOutImgList) {
                for (var i in that.OilEdgeOutImgList) {
                    that.OilEdgeOutList.push(that.OilEdgeOutImgList[i].url)
                }
            }
            if (that.LineWalkingOutImgList) {
                for (var i in that.LineWalkingOutImgList) {
                    that.LineWalkingOutList.push(that.LineWalkingOutImgList[i].url)
                }
            }
            if (that.surfaceOutImgList) {
                for (var i in that.surfaceOutImgList) {
                    that.surfaceOutList.push(that.surfaceOutImgList[i].url)
                }
            }
            if (that.otherOutImgList) {
                for (var i in that.otherOutImgList) {
                    that.otherOutList.push(that.otherOutImgList[i].url)
                }
            }

            //内部五项
            if (that.hardWareWithImgList) {
                for (var i in that.hardWareWithImgList) {
                    that.hardWareWithList.push(that.hardWareWithImgList[i].url)
                }
            }
            if (that.OilEdgeWithImgList) {
                for (var i in that.OilEdgeWithImgList) {
                    that.OilEdgeWithList.push(that.OilEdgeWithImgList[i].url)
                }
            }
            if (that.LineWalkingWithImgList) {
                for (var i in that.LineWalkingWithImgList) {
                    that.LineWalkingWithList.push(that.LineWalkingWithImgList[i].url)
                }
            }
            if (that.surfaceWithImgList) {
                for (var i in that.surfaceWithImgList) {
                    that.surfaceWithList.push(that.surfaceWithImgList[i].url)
                }
            }
            if (that.otherWithImgList) {
                for (var i in that.otherWithImgList) {
                    that.otherWithList.push(that.otherWithImgList[i].url)
                }
            }

            //商品图
            formData.goods_picture = that.goods_picture;

            //外部五项
            if (that.hardWareOut === '1') {
                formData.hardware_picture = that.hardWareOutList;
            }
            if (that.OilEdgeOut === '1') {
                formData.edge_picture = that.OilEdgeOutList;
            }
            if (that.LineWalkingOut === '1') {
                formData.line_picture = that.LineWalkingOutList;
            }
            if (that.surfaceOut === '1') {
                formData.surface_picture = that.surfaceOutList;
            }
            if (that.otherOut === '1') {
                formData.other_picture = that.otherOutList;
            }

            //内部五项
            if (that.hardWareWith === '1') {
                formData.inside_h_picture = that.hardWareWithList;
            }
            if (that.OilEdgeWith === '1') {
                formData.inside_e_picture = that.OilEdgeWithList;
            }
            if (that.LineWalkingWith === '1') {
                formData.inside_l_picture = that.LineWalkingWithList;
            }
            if (that.surfaceWith === '1') {
                formData.inside_s_picture = that.surfaceWithList;
            }
            if (that.otherWith === '1') {
                formData.inside_o_picture = that.otherWithList;
            }

            //请求API
            that.$http.post(that.adminApi.api_url + "/api/operate/edit", formData, {
                emulateJSON: true
            }).then(
                function (res) {
                    // 处理成功的结果
                    that.$message({
                        type: 'success',
                        message: `操作提示: ${ '修改成功' }`
                    });
                    that.$router.push({
                        path: '/commodity/goods',
                    });
                },
                function () {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },

        /**
         * 放弃编辑
         */
        cancel: function () {
            var that = this;
            that.$router.push({path: '/commodity/goods'});
        },

        /**
         * 获取品牌列表
         */
        getBrandList: function () {
            let that = this;
            let formData = {};
            formData.token = that.token;
            that.$http.post(that.adminApi.api_url + "/api/combrand/index", formData, {
                emulateJSON: true
            }).then(function (res) {
                let body = res.body;
                if (body.count > 0) {
                    for (let i in body.list) {
                        that.allBrand.push({
                            'value': body.list[i].id,
                            'label': body.list[i].english_name
                        });
                    }
                }
            });
        },

        /**
         * 获取闭合分类列表
         */
        getCloseList: function () {
            let that = this;
            let formData = {};
            formData.token = that.token;
            formData.type = 1;
            that.$http.post(that.adminApi.api_url + "/api/srandtyle/index", formData, {
                emulateJSON: true
            }).then(function (res) {
                let body = res.body;
                if (body.count > 0) {
                    for (let i in body.list) {
                        that.closeList.push({
                            'value': body.list[i].id,
                            'label': body.list[i].name
                        });
                    }
                }
            });
        },

        /**
         * 获取外形分类列表
         */
        getAppearanceList: function () {
            let that = this;
            let formData = {};
            formData.token = that.token;
            formData.type = 5;
            that.$http.post(that.adminApi.api_url + "/api/srandtyle/index", formData, {
                emulateJSON: true
            }).then(function (res) {
                let body = res.body;
                if (body.count > 0) {
                    for (let i in body.list) {
                        that.appearanceList.push({
                            'value': body.list[i].id,
                            'label': body.list[i].name
                        });
                    }
                }
            });
        },


        /**
         * 获取颜色分类列表
         */
        getColorList: function () {
            let that = this;
            let formData = {};
            formData.token = that.token;
            formData.type = 2;
            that.$http.post(that.adminApi.api_url + "/api/srandtyle/index", formData, {
                emulateJSON: true
            }).then(function (res) {
                let body = res.body;
                if (body.count > 0) {
                    for (let i in body.list) {
                        that.colorList.push({
                            'value': body.list[i].id,
                            'label': body.list[i].name
                        });
                    }
                }
            });
        },

        /**
         * 获取用途分类列表
         */
        getPurposeList: function () {
            let that = this;
            let formData = {};
            formData.token = that.token;
            formData.type = 3;
            that.$http.post(that.adminApi.api_url + "/api/srandtyle/index", formData, {
                emulateJSON: true
            }).then(function (res) {
                let body = res.body;
                if (body.count > 0) {
                    for (let i in body.list) {
                        that.purposeList.push({
                            'value': body.list[i].id,
                            'label': body.list[i].name
                        });
                    }
                }
            });
        },

        /**
         * 获取品级分类列表
         */
        getLevelList: function () {
            let that = this;
            let formData = {};
            formData.token = that.token;
            formData.type = 4;
            that.$http.post(that.adminApi.api_url + "/api/srandtyle/index", formData, {
                emulateJSON: true
            }).then(function (res) {
                let body = res.body;
                if (body.count > 0) {
                    for (let i in body.list) {
                        that.levelList.push({
                            'value': body.list[i].id,
                            'label': body.list[i].name
                        });
                    }
                }
            });
        },

        /**
         * 保存草稿
         */
        saveStatus:function () {
            let that = this;
            if (that.ruleForm.title === '') {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '必须添加名称' }`
                });
                return false;
            }
            if (that.imgList.length === 0) {
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '至少添加一张商品图片' }`
                });
                return false;
            }
            //请求的数据
            let formData = {};
            formData.token = that.token;
            formData.title = that.ruleForm.title;
            formData.sn = that.ruleForm.sn;
            formData.sort = that.ruleForm.sort;
            formData.brand_id = that.ruleForm.band;
            formData.closed_mode_id = that.ruleForm.close;
            formData.max_width = that.ruleForm.width_max;
            formData.min_width = that.ruleForm.widthMin;
            formData.height = that.ruleForm.height;
            formData.is_aiguillette = that.ruleForm.radio;
            formData.aiguillette_height = that.ruleForm.straps;
            formData.thickness = that.ruleForm.thick;
            formData.is_handlebar = that.ruleForm.is_handle;
            formData.handlebar_height = that.ruleForm.handle;
            formData.color_id = that.ruleForm.color;
            formData.grade_id = that.ruleForm.level;
            if(that.ruleForm.appearance) {
                formData.shape_id = that.ruleForm.appearance;
            }
            if(that.ruleForm.purpose) {
                formData.scene_id = that.ruleForm.purpose;
            }

            formData.is_external_hardware = that.hardWareOut;
            formData.is_external_oil_edge = that.OilEdgeOut;
            formData.is_external_line = that.LineWalkingOut;
            formData.is_external_surface = that.surfaceOut;
            formData.is_external_other = that.otherOut;
            formData.is_inside_hardware = that.hardWareWith;
            formData.is_inside_oil_edge = that.OilEdgeWith;
            formData.is_inside_line = that.LineWalkingWith;
            formData.is_inside_surface = that.surfaceWith;
            formData.is_inside_other = that.otherWith;

            if(that.tableData) {
                formData.purchase = that.tableData;
            }
            formData.deposit = that.ruleForm.deposit;
            formData.content = that.content;
            formData.describe = that.goods_remarks;
            formData.status =3;

            if (that.imgList) {
                for (var i in that.imgList) {
                    that.goods_picture.push(that.imgList[i].url)
                }
            }

            //外部五项
            if (that.hardWareOutImgList) {
                for (var i in that.hardWareOutImgList) {
                    that.hardWareOutList.push(that.hardWareOutImgList[i].url)
                }
            }
            if (that.OilEdgeOutImgList) {
                for (var i in that.OilEdgeOutImgList) {
                    that.OilEdgeOutList.push(that.OilEdgeOutImgList[i].url)
                }
            }
            if (that.LineWalkingOutImgList) {
                for (var i in that.LineWalkingOutImgList) {
                    that.LineWalkingOutList.push(that.LineWalkingOutImgList[i].url)
                }
            }
            if (that.surfaceOutImgList) {
                for (var i in that.surfaceOutImgList) {
                    that.surfaceOutList.push(that.surfaceOutImgList[i].url)
                }
            }
            if (that.otherOutImgList) {
                for (var i in that.otherOutImgList) {
                    that.otherOutList.push(that.otherOutImgList[i].url)
                }
            }

            //内部五项
            if (that.hardWareWithImgList) {
                for (var i in that.hardWareWithImgList) {
                    that.hardWareWithList.push(that.hardWareWithImgList[i].url)
                }
            }
            if (that.OilEdgeWithImgList) {
                for (var i in that.OilEdgeWithImgList) {
                    that.OilEdgeWithList.push(that.OilEdgeWithImgList[i].url)
                }
            }
            if (that.LineWalkingWithImgList) {
                for (var i in that.LineWalkingWithImgList) {
                    that.LineWalkingWithList.push(that.LineWalkingWithImgList[i].url)
                }
            }
            if (that.surfaceWithImgList) {
                for (var i in that.surfaceWithImgList) {
                    that.surfaceWithList.push(that.surfaceWithImgList[i].url)
                }
            }
            if (that.otherWithImgList) {
                for (var i in that.otherWithImgList) {
                    that.otherWithList.push(that.otherWithImgList[i].url)
                }
            }

            //商品图
            formData.goods_picture = that.goods_picture;

            //外部五项
            if (that.hardWareOut === '1') {
                formData.hardware_picture = that.hardWareOutList;
            }
            if (that.OilEdgeOut === '1') {
                formData.edge_picture = that.OilEdgeOutList;
            }
            if (that.LineWalkingOut === '1') {
                formData.line_picture = that.LineWalkingOutList;
            }
            if (that.surfaceOut === '1') {
                formData.surface_picture = that.surfaceOutList;
            }
            if (that.otherOut === '1') {
                formData.other_picture = that.otherOutList;
            }

            //内部五项
            if (that.hardWareWith === '1') {
                formData.inside_h_picture = that.hardWareWithList;
            }
            if (that.OilEdgeWith === '1') {
                formData.inside_e_picture = that.OilEdgeWithList;
            }
            if (that.LineWalkingWith === '1') {
                formData.inside_l_picture = that.LineWalkingWithList;
            }
            if (that.surfaceWith === '1') {
                formData.inside_s_picture = that.surfaceWithList;
            }
            if (that.otherWith === '1') {
                formData.inside_o_picture = that.otherWithList;
            }

            //请求列表
            that.$http.post(that.adminApi.api_url + "/api/operate/add", formData, {
                emulateJSON: true
            }).then(
                function (res) {
                    // 处理成功的结果
                    that.$message({
                        type: 'success',
                        message: `操作提示: ${ '添加成功' }`
                    });
                    that.$router.push({
                        path: '/commodity/goods',
                        // query: {city_id: that.city_id, type: that.type, store_id: that.store_id}
                    });
                },
                function () {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        }
    },
}